<template>
    <div class="resetPassword-page">
        <a-modal width="600px" title="修改密码" :visible="visible" @ok="modalOk" @cancel="closeModal" okText="确定" cancelText="取消">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules">
                    <div class="form-panel">
                        <a-form-model-item label="旧密码" prop="password">
                            <a-input type="password" style="width:250px" v-model="formData.password" placeholder="请输入旧密码"
                                autocomplete="new-password" />
                        </a-form-model-item>
                        <a-form-model-item label="新密码" prop="newPassword">
                            <a-input type="password" style="width:250px" v-model="formData.newPassword" placeholder="请输入新密码"
                                autocomplete="new-password" />
                        </a-form-model-item>
                        <a-form-model-item label="确认新密码" prop="copyPassword">
                            <a-input type="password" style="width:250px" v-model="formData.copyPassword" placeholder="请再次输入新密码"
                                autocomplete="new-password" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import api from "@/api/api";
@Component({
    name: "Tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    formLoading = false;
    rules = {
        password: [{ required: true, message: "请输入旧密码", trigger: "change" }],
        newPassword: [{ required: true, message: "请输入新密码", trigger: "change" }],
        copyPassword: [{ required: true, message: "请输入确认新密码", trigger: "change" }],
    };
    formData: any = {};
    async mounted() {}
    closeModal() {
        this.formData = {};
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                if (this.formData.newPassword !== this.formData.copyPassword) {
                    this.$message.error("新密码和重复密码不一致，请检查后重试");
                    return;
                }
                this.formLoading = true;
                try {
                    const res = await api.changePassword(this.formData);
                    this.$message.success(res.msg);
                    this.closeModal();
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
}
</script>
<style lang="scss">
</style>
